<template>
  <div :style="containerStyle"
       class='login-container'>
    <div class="login-content"
         :style="{height:status === 'register'?'536px':status === 'bindAcount'?'260px':'424px'}">
      <div class="login-bg">
        <div :style="containerStyle"
             class="bg"></div>
        <img class="logo"
             :src="companyInfo.company_logo"
             alt="">
      </div>
      <div class="login-form"
           v-if="status !== 'register'&&status !== 'bindAcount'">
        <h2>{{companyInfo.login_name|| companyInfo.company_name }}</h2>
        <div class="login-form-content">
          <div class="login-type-tabs">
            <div :class="{'active':status==='passwordLogin'&&status !== 'bindAcount'}"
                 @click="status='passwordLogin'"
                 class="tabs password">
              <p>账户密码登录</p>
            </div>
            <div :class="{'active':status==='phoneLogin'&&status !== 'bindAcount'}"
                 @click="status='phoneLogin'"
                 class="tabs phone">
              <p>手机号登录</p>
            </div>
          </div>
          <!-- 密码登录表单 -->
          <el-form :model="loginForm"
                   v-if="status === 'passwordLogin'&&status !== 'bindAcount'"
                   ref="loginForm"
                   class="login-forms"
                   :rules="loginFormRules">
            <el-form-item prop="user_no">
              <i class="fa fa-user-o"></i>
              <input v-model="loginForm.user_no"
                     @keyup="accountInput(loginForm.user_no)"
                     placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="password"
                          class="password">
              <i class="fa fa-lock"></i>
              <input v-model="loginForm.password"
                     type="password"
                     placeholder="请输入密码" />
            </el-form-item>
          </el-form>
          <!-- 验证码登录表单 -->
          <el-form :model="phoneLoginForm"
                   v-if="status === 'phoneLogin'&&status !== 'bindAcount'"
                   ref="phneLoginForm"
                   class="login-forms"
                   :rules="phoneLoginFormRules">
            <el-form-item prop="phone">
              <i class="fa fa-user-o"></i>
              <input type="password"
                     style="display:none;" />
              <!--解决自动填充密码问题 -->
              <input v-model="phoneLoginForm.phone"
                     placeholder="请输入手机号"
                     maxlength="11"
                     type="text"
                     autocomplete="new-password"
                     :readonly="phoneReadOnly"
                     @blur="phoneReadOnly = true"
                     @focus="phoneReadOnly = false"
                     @input="onInputLogin" />
            </el-form-item>
            <el-form-item prop="code">
              <i class="fa fa-lock"></i>
              <input type="password"
                     style="display:none;" />
              <!--解决自动填充密码问题 -->
              <input v-model="phoneLoginForm.code"
                     type="text"
                     placeholder="请输入验证码"
                     autocomplete="new-password"
                     @input="onCodeLogin" />
              <el-button @click="getLoginVerifyCode"
                         class="get-verify-btn"
                         :disabled="verifyCodeDisabled"
                         :class="{ disabled: verifyCodeDisabled }"
                         type="primary">{{ verifyCodeBtnText }}</el-button>
            </el-form-item>
          </el-form>
          <!-- 用户注册表单 -->
          <el-form :model="registerForm"
                   class="login-forms"
                   v-if="status === 'register'&&status !== 'bindAcount'"
                   ref="registerForm"
                   :rules="registerLoginFormRules">
            <el-form-item prop="phone">
              <i class="fa fa-user-o"></i>
              <input type="password"
                     style="display:none;" />
              <!--解决自动填充密码问题 -->
              <input v-model="registerForm.phone"
                     type="text"
                     placeholder="请输入手机号"
                     maxlength="11"
                     @input="onInput" />
            </el-form-item>
            <el-form-item prop="code">
              <i class="fa fa-lock"></i>
              <input type="password"
                     style="display:none;" />
              <!--解决自动填充密码问题 -->
              <input v-model="registerForm.code"
                     type="text"
                     placeholder="请输入验证码"
                     @input="onInputCode" />
              <el-button @click="getRegisterVerifyCode"
                         class="get-verify-btn"
                         :disabled="verifyCodeDisabled"
                         :class="{ disabled: verifyCodeDisabled }"
                         type="primary">{{ verifyCodeBtnText }}</el-button>
            </el-form-item>
          </el-form>
          <div class="btn-groups">
            <el-button v-if="status !== 'register'&&status !== 'bindAcount'"
                       type="primary"
                       class="login-btn primary-btn"
                       @click="getKey('登录')">登 录</el-button>
            <!-- <el-button v-if="status !== 'register'"
                       type="text"
                       @click="toggleLoginOrRegister('register')"
                       class="text-btn">用户注册</el-button> -->

            <!-- <el-button v-if="status === 'register'"
                       type="primary"
                       class="register-btn primary-btn"
                       @click="register('registerForm')">注册</el-button> -->
            <!-- <el-button v-if="status === 'register'"
                       type="text"
                       @click="toggleLoginOrRegister('passwordLogin')"
                       class="text-btn">已有账号,立即登录</el-button> -->
          </div>

          <el-dialog title="微信扫码登录"
                     :visible.sync="wechatLoginDialog"
                     width="30%"
                     :before-close="handleClose">
            <WechatCodeScanLogin :typeVal="typeVal"
                                 :closeScanDialog="closeScanDialog">
            </WechatCodeScanLogin>
          </el-dialog>

          <div class="bottom-register-box">
            <span>第三方登录</span>
            <img src="http://dev-scsl-new.oss-cn-hangzhou.aliyuncs.com/s_c_s_l/upload_image/paper/1624440734387.png"
                 @click="onScanCode"
                 alt="">
            <el-button type="text"
                       v-if="status !== 'register'&&status !== 'bindAcount'"
                       @click="toggleLoginOrRegister('register')"
                       class="now-register">立即注册</el-button>
            <!-- <el-button v-if="status === 'register'"
                       type="text"
                       style="left:35%;"
                       @click="toggleLoginOrRegister('passwordLogin')"
                       class="now-register">已有账号,立即登录</el-button> -->
          </div>
          <p style="font-size:14px;margin-top:8px;color:red;">为保障平台用户的账户安全，所有平台用户请采用手机验证登录并及时修改为强密码，谢谢配合！ </p>
        </div>
      </div>
      <!-- 注册组件 -->
      <div class="register-now"
           v-if="status === 'register'&&status !== 'bindAcount'">
        <RegisterNow :onRegisterFunc="onRegisterFunc"
                     :user_type.sync="user_type">
        </RegisterNow>
      </div>
      <!-- 绑定帐号组件 -->
      <div class="register-now"
           v-if="status === 'bindAcount'">
        <BindAcount :onBindAccountFunc="onBindAccountFunc"></BindAcount>
      </div>
    </div>
  </div>

</template>
<script>
import { userPermissionApi } from "@/services/UserPermission";
import WechatCodeScanLogin from './Components/WechatCodeScanLogin';
import RegisterNow from './Components/RegisterNow';
import BindAcount from './Components/BindAccount';
import { MyCompanyApi } from '@/services/WorkBench';
var checkPwd = (rule, value, cb) => {
  //验证密码的正则表达式
  const regPwd =
    /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[`~!@#$%^&*()_\-+=<>.?:"{}].*).{10,32}$/
  if (regPwd.test(value)) {
    return cb()
  }
  cb(new Error('密码需包含大小写字母、数字及特殊字符，长度在10-32位之间'))
}
export default {
  components: {
    WechatCodeScanLogin,
    RegisterNow,
    BindAcount
  },
  data () {
    return {
      typeVal: 0,
      wechatLoginDialog: false,
      registrfa: false,
      hrefUrl: "",
      user_type: "",
      // 密码登录表单对象
      loginForm: {
        login_type: 1
      },
      // 整体页面样式
      containerStyle: {},
      loginFormRules: {
        user_no: [
          { required: true, message: "请输入用户名", trigger: "change" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          { required: true, validator: checkPwd, trigger: 'blur' },
        ]
      },
      // 验证码登录表单对象
      phoneLoginForm: {
        login_type: 2,
        phone: ""
      },
      // 验证码登录表单readonly属性，用于解决浏览器自动填充
      codeReadOnly: true,
      phoneReadOnly: true,
      phoneLoginFormRules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          // {
          //   pattern: /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/,
          //   message: "请您输入有效的手机号"
          // }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "change" }]
      },

      // 注册表单对象
      registerForm: {
        phone: "",
        code: ""
      },
      // 用户注册
      registerLoginFormRules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          // {
          //   pattern: /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/,
          //   message: "请您输入有效的手机号"
          // }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "change" }]
      },
      registerFormRules: {
        phone: [{ required: true, message: "请输入手机号", trigger: "change" }],
        code: [{ required: true, message: "请输入验证码", trigger: "change" }]
      },
      // 是否处于请求接口过程中
      pending: false,
      // 单位信息
      companyInfo: {},
      // 当前处于登录还是注册状态 bindAcount   register(弃)
      status: "passwordLogin",
      // 获取验证码按钮是否禁用
      verifyCodeDisabled: false,
      // 验证码禁用倒计时时间
      verifyCodeTimeout: 60,
      // 验证码按钮文字
      verifyCodeBtnText: "获取验证码",
      // 验证码倒计时定时器id
      verifyCodeTimeoutId: 0,
      // 是否是弱密码
      isWeakPwd: false
    };
  },
  methods: {
    onBindAccountFunc (val, typeVal) {//返回/绑定的传值；
      if (val == "passwordLogin" && typeVal == '绑定') {//绑定成功
        // this.loginForm.user_no = ph;
        // this.loginForm.password = pwd;
        this.status = "passwordLogin";
        // this.getKey('绑定')
      } else if (val == "passwordLogin" && typeVal == '返回') {//返回
        this.status = "passwordLogin";
      }
      console.log('返回/绑定的传值val=', val)
    },
    onRegisterFunc (val, accountVal, ph, pwd) {//立即注册-子到父的传值；
      if (val == "passwordLogin" && accountVal == 'noneAccount') {//没有帐号
        this.loginForm.user_no = ph;
        this.loginForm.password = pwd;
        this.status = "passwordLogin";
        this.getKey('注册')
      } else if (val == "passwordLogin" && accountVal == 'hasAccount') {//有帐号
        this.status = "passwordLogin";
      }
      console.log('子到父的传值val=', val)
    },
    closeScanDialog (val) {//子组件点击‘去登录’、‘立即注册’触发该事件  子向父传值
      this.typeVal = 0;
      if (val == 1) {//去登录
        this.status = "passwordLogin";
      } else if (val == 2) {//去注册
        this.toggleLoginOrRegister('register');
      };
      this.wechatLoginDialog = false;

      console.log('子向父传值val=', val)
    },
    handleClose (done) {//扫码的弹框
      this.typeVal = 0;
      this.wechatLoginDialog = false;
      done()
    },
    onScanCode () {//打开扫码的弹框
      this.typeVal = 1;
      this.wechatLoginDialog = true;
    },
    //只允许英文或数字-产品需求
    accountInput (val) {
      //账号的实时输入
      let codeReg = new RegExp("[A-Za-z0-9]+"), //正则 英文+数字；
        len = val.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.loginForm.user_no = str;
    },
    // 快捷登录
    onInputLogin () {
      this.$refs.phneLoginForm.validateField("phone", phoneError => {
        console.log(`${phoneError}***************************`);

        if (!phoneError) {
        }
      });
    },
    onCodeLogin () {
      this.phoneReadOnly = false;
      this.$refs.phneLoginForm.validateField("code", codeError => {
        console.log(`${codeError}***************************`);

        if (!codeError) {
        }
      });
    },
    // 用户注册
    onInput () {

    },
    onInputCode () {
      this.$refs.registerForm.validateField("code", codeError => {
        console.log(`${codeError}***************************`);

        if (!codeError) {
        }
      });
    },
    // 登录方法
    login (val) {
      // 密码登录
      if (this.status === "passwordLogin") {
        this.$refs["loginForm"].validate(valid => {
          if (valid) {
            if (!this.pending) {
              this.pending = true;
              userPermissionApi
                .login({
                  data: this.loginForm
                })
                .then(
                  res => {
                    this.pending = false;
                    this.isWeakPwd = !res.data.pwd_strong_flag
                    if (res.data.access_token) {
                      // window.localStorage.clear()
                      // this.pending = false
                      this.clearStorage(res.data, val);
                    }
                  },
                  err => {
                    this.pending = false;
                    console.log(err);
                  }
                );
            }
          }
        });
        // 验证码登录
      } else if (this.status === "phoneLogin") {
        this.$refs["phneLoginForm"].validate(valid => {
          if (valid) {
            if (!this.pending) {
              this.pending = true;
              userPermissionApi
                .login({
                  data: {
                    phone: this.phoneLoginForm.phone,
                    code: this.phoneLoginForm.code,
                    login_type: 2
                  }
                })
                .then(
                  res => {
                    this.pending = false;
                    this.isWeakPwd = !res.data.pwd_strong_flag
                    if (res.data.access_token) {
                      // window.localStorage.clear()
                      // this.pending = false
                      this.clearStorage(res.data, val);
                    }
                  },
                  err => {
                    this.pending = false;
                    console.log(err);
                  }
                );
            }
          }
        });
      }
    },

    // 登录成功后清除旧数据，写入新数据
    clearStorage (data, typeVal) {
      this.$store.state.switchCompId = 0;
      window.localStorage.clear();
      this.$store.dispatch("resetActiveTabsList", []);
      window.localStorage.setItem("access_token", data.access_token);
      window.sessionStorage.setItem("access_token", data.access_token);
      window.localStorage.setItem(
        "companyInfo",
        JSON.stringify(this.companyInfo)
      );

      window.localStorage.setItem("user_id", data.user_id);
      window.localStorage.setItem("phone", data.phone);
      window.localStorage.setItem("comp_id", data.comp_id);
      // window.sessionStorage.setItem("access_token", data.access_token);
      window.localStorage.setItem("userInfo", JSON.stringify(data));
      this.getUserAuth(data.user_id, typeVal);
      if (typeVal == '注册' || typeVal == '绑定') {

      } else {
        // this.$message({
        //   type: "success",
        //   message: "登录成功",
        //   offset: 60
        // });
      }

    },
    // 注册方法
    register (data) {
      this.$refs[data].validate(valid => {
        if (valid) {
          // if (!this.registrfa) {
          //   this.registrfa = true
          userPermissionApi
            .onRegister({
              data: {
                phone: this.registerForm.phone,
                code: this.registerForm.code,
                usage_code: 2,
                system_no: "industry",
                user_type: this.user_type
              }
            })
            .then(
              res => {
                // this.registrfa = false
                // if (res.data.access_token) {
                if (res.code === 0) {
                  this.$message.success("注册成功");
                  this.status = "passwordLogin";
                  this.registerForm.phone = "";
                  this.registerForm.code = "";
                }

                // }
              },
              err => {
                // this.pending = false
                console.log(err);
              }
            );
          // }
        }
      });
    },

    // 根据系统编号和授权码获取key
    getKey (val) {
      let authCode = process.env.AUTH_CODE;
      userPermissionApi
        .getKey({
          data: {
            system_no: "industry",
            auth_code: authCode
          }
        })
        .then(
          res => {
            console.log(res, "get key");
            let data = res.data;
            if (data.key) {
              window.sessionStorage.setItem("platformKey", data.key);
            }
            this.login(val);
          },
          err => {
            console.log(err);
          }
        );
    },
    // 根据域名获取单位信息
    getCompanyByDomain () {
      let domain =
        location.host.indexOf("localhost") >= 0
          ? "dev_platform.ihibuilding.cn"
          : location.host;
      // let domain = 'dev_platform.ihibuilding.cn'
      return userPermissionApi
        .getCompanyByDomain({
          data: {
            company_domain: domain
          }
        })
        .then(
          res => {
            console.log(res, "get company domain");
            window.localStorage.setItem(
              "companyInfo",
              JSON.stringify(res.data)
            );
            this.companyInfo = res.data;
            this.containerStyle = {
              backgroundImage: `url(${this.companyInfo.image_picture})`
            }
            // 设置页面title为接口返回的数据
            let title = document.getElementsByTagName("title");
            title[0].innerText = this.companyInfo.platform_name || this.companyInfo.company_name;
            // 如果设置了公司logo，就将浏览器标签页的icon修改为logo
            if (this.companyInfo.company_logo) {
              let logo = document.querySelector(".tab-icon");
              logo.href = this.companyInfo.company_logo;
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    // token没失效执行的事件
    loginCreated () {
      userPermissionApi
        .login({
          data: this.loginForm
        })
        .then(async res => {
          if (res.data.access_token) {
            window.localStorage.clear();
            this.$store.dispatch("resetActiveTabsList", []);
            window.localStorage.setItem("token", res.data.access_token);
            window.sessionStorage.setItem("token", res.data.access_token);
            window.localStorage.setItem("user_id", res.data.user_id);
            this.$store.dispatch("setUserInfo", res.data);
            window.localStorage.setItem("userInfo", JSON.stringify(res.data));
            await this.$router.push({ path: "/homepage" });
            await location.reload();//强制刷新页面；
          }
        });
    },
    //获取单位列表的数据-判断里面是否有通过的单位（注释：新用户下comp_id=0时，默认从里面默认首个通过的单位为当前的单位）
    getMyCompany () {
      MyCompanyApi.getMyCompany({
        params: {
          is_page: 0
        }
      }).then(async (res) => {
        if (res.data.list.length > 0) {//有值就跳进去
          var countVal = 0;
          // res.data.list.forEach(ele => {
          for (let ele of res.data.list) {
            if (ele.status == 3) {//存在通过的单位
              if (this.isWeakPwd) {
                this.$message({
                  type: "warning",
                  message: "密码强度过低，请及时修改！",
                  offset: 60,
                  duration: 1500
                });
              } else {
                this.$message({
                  type: "success",
                  message: "登录成功",
                  offset: 60,
                  duration: 1500
                });
              }

              await this.$router.push({ path: "/homepage" });
              // await location.reload();//强制刷新页面；
              break
              // throw Error()
            } else {
              countVal = countVal + 1;
            }
          };
          console.log('单位通过的个数countval=', countVal);
          if (countVal == res.data.list.length) {//单位没有通过的直接跳转到中间页面
            this.$router.push({ path: "/workbenchMyUnit" });//注册成功后直接跳转到-工作台-我的单位页面-入驻v1.3.0的需求
            // this.$message.success('操作成功，请进行单位创建/加入');
            this.$message({
              type: "success",
              message: "操作成功，请进行单位创建/加入",
              offset: 60,
              duration: 1500
            });
          }
        } else if (res.data.list.length == 0) {
          this.$router.push({ path: "/workbenchMyUnit" });//注册成功后直接跳转到-工作台-我的单位页面-入驻v1.3.0的需求
          // this.$message.success('操作成功，请进行单位创建/加入');
          this.$message({
            type: "success",
            message: "操作成功，请进行单位创建/加入",
            offset: 60,
            duration: 1500
          });
        }
        console.log('单位列表=', res)
      }).catch((error) => {
        console.log('error=', error)
      })
    },
    // 获取用户权限
    getUserAuth (userId, typeVal) {
      userPermissionApi
        .getUserAuth({
          data: {
            user_id: userId
          }
        })
        .then(
          res => {
            console.log(res, "get user auth");
            let userAuthList = res.data.list;
            if (userAuthList) {
              this.$store.dispatch("setUserAuth", res.data.list);
            };
            if (typeVal == '登录' || typeVal == '绑定') {
              this.getMyCompany();//判断列表里是否有通过的单位
              // } else if (typeVal == '注册' || typeVal == '绑定') {
            } else if (typeVal == '注册') {
              this.$router.push({ path: "/workbenchMyUnit" });//注册成功后直接跳转到-工作台-我的单位页面-入驻v1.3.0的需求
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    // 切换登录方式
    toggleLoginMode (mode) {
      this.status = mode;
      // console.log('status=', this.status)
      // this.$message('快捷登录=',  this.status);
    },
    // 切换登录或注册状态
    toggleLoginOrRegister (mode) {
      this.verifyCodeTimeout = 60;
      this.verifyCodeDisabled = false;
      this.verifyCodeBtnText = "获取验证码";
      clearInterval(this.verifyCodeTimeoutId);
      this.status = mode;
    },
    // 获取登录验证码
    getLoginVerifyCode () {
      // 判断是否为手机号是否为空
      if (this.phoneLoginForm.phone === "") {
        this.$message("手机号不能为空");
      } else {
        if (
          this.phoneLoginForm.phone &&
          this.phoneLoginForm.phone.trim() !== ""
        ) {
          if (this.phoneLoginForm.phone.length !== 11) {
            this.$message("手机号长度不符合要求（11位）");
          } else {
            userPermissionApi
              .sendCode({
                data: {
                  phone: this.phoneLoginForm.phone,
                  usage_code: 1,
                  template_no: "industry-0001",
                  system_no: "industry",
                  user_type: this.user_type // 注册用户类型（3：单位管理员，4：普通用户）
                }
              })
              .then(
                res => {
                  if (res.code === 0) {
                    this.verifyCodeDisabled = true;
                    this.verifyCodeInterval();
                  }
                  console.log(res, "send login code");
                },
                err => {
                  console.log(err);
                }
              );
          }
        } else {
          this.$message.error("请输入有效手机号");
        }
      }
    },
    // 获取注册验证码
    getRegisterVerifyCode () {
      if (this.registerForm.phone === "") {
        this.$message("手机号不能为空");
      } else {
        if (this.registerForm.phone && this.registerForm.phone.trim() !== "") {
          if (this.registerForm.phone.length !== 11) {
            this.$message("手机号长度不符合要求（11位）");
          } else {
            userPermissionApi
              .sendCode({
                data: {
                  phone: this.registerForm.phone,
                  usage_code: 2,
                  template_no: "industry-0001",
                  system_no: "industry",
                  user_type: this.user_type // 注册用户类型（3：单位管理员，4：普通用户）
                }
              })
              .then(
                res => {
                  if (res.code === 0) {
                    this.verifyCodeDisabled = true;
                    this.verifyCodeInterval();
                  }
                  console.log(res, "send login code");
                },
                err => {
                  console.log(err);
                }
              );
          }
        } else {
          this.$message.error("请输入有效手机号");
        }
      }
    },
    // 开始倒计时
    verifyCodeInterval () {
      let timeout = setInterval(() => {
        if (this.verifyCodeTimeout === 1) {
          this.verifyCodeTimeout = 60;
          this.verifyCodeDisabled = false;
          this.verifyCodeBtnText = "获取验证码";
          clearInterval(this.verifyCodeTimeoutId);
        } else {
          this.verifyCodeTimeout--;
          this.verifyCodeBtnText = "重新发送 " + this.verifyCodeTimeout;
        }
      }, 1000);
      this.verifyCodeTimeoutId = timeout;
    }
  },
  async created () {
    this.status = this.$route.query.status == 'bindAcount' ? "bindAcount" : "passwordLogin"
    // 获取二级域名
    this.hrefUrl = window.location.href;
    var s = this.hrefUrl;
    var h = s.split(".")[0];
    var a = h.split("//")[1];
    if (a === "www" || a === "WWW") {
      this.user_type = 3; // 管理
    } else {
      this.user_type = 4; // 普通
    }
    await this.getCompanyByDomain();

    // 判断token不为null的状态下直接进入页面
    if (window.localStorage.getItem("token") != null) {
      // this.$router.push({ path: '/home' })
      // this.loginCreated()
    } else {
      this.$router.push({ path: "/login" });
    }
  },
  mounted () { }
};
</script>
<style scoped lang="scss">
.bottom-register-box {
  display: flex;
  flex-direction: row;
  position: relative;
  margin-top: 20px;
  .now-register {
    padding: 0px;
    position: absolute;
    left: 42%;
  }
  p {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: red;
    margin-left: 20px;
  }
  img {
    border-radius: 50%;
    width: 14px;
    height: 14px;
    margin-left: 12px;
    margin-top: 3px;
    cursor: pointer;
  }
}
.login-container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-content {
    width: 806px;
    height: 424px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 30px 60px -20px rgba(0, 0, 0, 0.47);
    display: flex;
    justify-content: flex-start;
    .login-bg {
      width: 302px;
      height: 100%;

      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .bg {
        width: 100%;
        height: 100%;
        filter: opacity(26%);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .logo {
        width: 93px;
        height: 88px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    // 在小屏上显示时，隐藏左侧区域
    @media screen and (max-width: 800px) {
      .login-bg {
        display: none;
      }
    }

    .login-form {
      padding: 42px 68px 42px 68px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      flex: 1;

      h2 {
        font-size: 20px;
        color: #000;
        text-align: center;
        font-weight: normal;
      }
      .login-form-content {
        margin-top: 35px;
        width: 100%;
        .login-type-tabs {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 24px;
          .tabs {
            padding: 8px 20px;
            color: rgba(0, 0, 0, 0.65);
            font-size: 16px;
            text-align: center;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            &.active {
              color: #1890ff;
              border-bottom: 2px solid #1890ff;
            }
          }
        }
        .login-forms {
          margin-top: 24px;
          .fa {
            position: absolute;
            color: rgba(0, 0, 0, 0.25);
            left: 12px;
            z-index: 999;
            top: 50%;
            transform: translateY(-50%);
          }
          input {
            width: 100%;
            height: 40px;
            line-height: 34px;
            background-color: transparent !important;
            border: 0;
            border: 1px solid #d9d9d9;
            color: #999;
            border-radius: 4px;
            padding-left: 36px;
            position: relative;

            &:-internal-autofill-selected {
              background-color: #fff !important;
            }
            &:-webkit-autofill {
              // 覆盖浏览器自动填充默认样式
              -webkit-box-shadow: 0 0 0px 1000px white inset;
              -webkit-text-fill-color: #999;
            }
            &::-webkit-input-placeholder {
              color: rgba(0, 0, 0, 0.25);
            }
            &:focus {
              outline: 0;
              background-color: #fff !important;
            }
          }
          .get-verify-btn {
            width: 120px;
            background-color: transparent;
            color: #1890ff;
            border: 0;
            border-radius: 0;
            font-size: 14px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        .forget-password {
          text-align: right;
          font-size: 14px;
          color: #1890ff;
          margin: 24px 0;
          cursor: pointer;
          opacity: 0;
        }
        .login-button {
          background-color: #1890ff;
          width: 100%;
          color: #fff;
          font-size: 16px;
        }
        .btn-groups {
          .el-button {
            width: 100%;
            margin-left: 0;
            font-size: 16px;
          }
        }
      }
    }
    @media screen and (max-width: 540px) {
      .login-form {
        padding: 42px 10px;
      }
    }
  }
}
</style>
